<template>
	<view class="dialog-mask" :class="{show:value}" :style="{zIndex:zIndex}">
		<view class="box">
			<view class="u-text-center u-font-36 text-bold">
				开通VIP
			</view>
			<view class="real-icon">
				<image class="img" src="/static/logo.png" mode=""></image>
			</view>
			<view class="u-font-28 u-text-center">
				<slot name="label">开通VIP，即可使用该功能</slot>
			</view>
			<view class="btn bg-theme" @tap="jumpTo('/pages/vip/vip')">
				立即开通
			</view>
		</view>
		<view class="close iconfont icon-fail" @tap="close">
			
		</view>
	</view>
</template>

<script>
	import {jumpTo} from "@/utils/util.js"
	export default{
		props:{
			value:{
				type:Boolean,
				default:false
			},
			zIndex:{
				type:Number,
				default:500
			}
		},
		methods:{
			jumpTo,
			close(){
				this.$emit('close');
				this.$emit('input', false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog-mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba($color:#999999, $alpha:0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transform: translateY(200%);
		&.show{
			opacity: 1;
			transform: translateY(0%);
			.box{
				transform: scale(1);
			}
		}
		.box{
			width: 600rpx;
			background-color: #ffffff;
			color:#333333;
			border-radius: 30rpx;
			padding: 40rpx;
			transform: scale(0.1);
			transition: all 300ms ease-out;
		}
		.real-icon{
			margin: 20rpx 0;
			text-align: center;
			.img{
				width: 230rpx;
				height: 230rpx;
				border-radius: 10%;
			}
		}
		.btn{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			padding: 20rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
			font-weight: bold;
		}
		.close{
			font-size: 100rpx;
			margin-top: 40rpx;
			color: #ffffff;
			text-shadow: 0 0 30rpx rgba($color:#000000, $alpha:0.5);
		}
	}
</style>